<template>
  <Card :bordered="false" class="gaCard">
    <template #title>
      <Button
        type="primary"
        class="toggler"
        :disabled="loading.state.value"
        @click="handleToggleShow"
      >
        <StockOutlined />
      </Button>
    </template>
    <template #extra>
      <Space>
        <DatePicker
          :disabled="loading.state.value"
          :disabled-date="(date) => date.isAfter(dayjs())"
        />
        <ButtonGroup>
          <Button>Doc</Button>
          <Button>API</Button>
          <Button>Example</Button>
        </ButtonGroup>
      </Space>
    </template>
    <Spin :spinning="loading.state.value">
      <div class="pieCharts">
        <div ref="countryRef" :id="GOOGLE_CHART_ID_MAP.COUNTRY" class="chart country"></div>
        <div ref="getPieRef" :id="GOOGLE_CHART_ID_MAP.CITY" class="chart city"></div>
        <div ref="browserRef" :id="GOOGLE_CHART_ID_MAP.BROWSER" class="chart browser"></div>
        <div ref="osRef" :id="GOOGLE_CHART_ID_MAP.OS" class="chart os"></div>
      </div>
      <Divider />
      <div :id="GOOGLE_CHART_TIMELINE_ID" class="timeline"></div>
    </Spin>
  </Card>
</template>

<script setup lang="ts">
import { Button, Space, DatePicker, ButtonGroup, Card, Spin, Divider } from 'ant-design-vue'
import { StockOutlined } from '@ant-design/icons-vue'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { APP_COLOR_PRIMARY } from '@/config'
import { useLoading } from '@/handcer'

const GOOGLE_CHART_TIMELINE_ID = 'timeline'
const GOOGLE_CHART_ID_MAP = {
  COUNTRY: 'country',
  CITY: 'city',
  BROWSER: 'browser',
  OS: 'os',
}

// const GOOGLE_CHART_BG_OPACITY = 0.05
const GOOGLE_CHART_COLORS = [
  APP_COLOR_PRIMARY,
  '#2fc32f',
  '#b0dc0b',
  '#eab404',
  '#de672c',
  '#ec2e2e',
  '#d5429b',
  '#6f52b8',
  '#1c7cd5',
  '#56b9f7',
  '#0ae8eb',
]

const loading = useLoading()

// const chartDate = ref<dayjs.Dayjs | null>(null)
// const startChartDate = computed(() => {
//   if (chartDate.value) {
//     const formated = chartDate.value.format('YYYY-MM-DD')
//     const today = dayjs().format('YYYY-MM-DD')
//     return formated === today ? 'today' : formated
//   } else {
//     return 'today'
//   }
// })

const countryRef = ref()
// const getPieRef = ref<HTMLElement>();
// const browserRef = ref<HTMLElement>();
// const osRef = ref<HTMLElement>();

const handleToggleShow = () => {}

const getPieChart = (container: string, title: string): echarts.EChartOption => {
  return {
    title: {
      text: title,
    },
    color: GOOGLE_CHART_COLORS,
    legend: {
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '25',
    },
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: 12,
      },
    },
    dataset: {
      source: [
        {
          city: 'Wuhan',
          country: 'China',
          country_code: 'CN',
          region: 'HuBei',
          zip: '',
          region_code: 'HB',
        },
        {
          city: 'XianLin',
          country: 'China',
          country_code: 'CN',
          region: 'HuBei',
          zip: '',
          region_code: 'HB',
        },
      ],
      dimensions: ['city', 'Value'],
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: '50%', // 饼图半径，可以设置为像素值或百分数
      },
    ],
  }
}

const initAnalytics = () => {
  // return new Promise<(query: any) => void>((resolve) => {
  // const timeline;

  const chartOption = getPieChart('测试', '国家地区')
  // if (!countryRef.value) {
  //   return;
  // }
  const pieChart = echarts.init(countryRef.value)
  pieChart.setOption(chartOption)
  // countryChart.value.setOption({
  //   title: {
  //     text: "总用户量",
  //   },
  //   xAxis: {
  //     data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
  //   },
  //   yAxis: {},
  //   series: [
  //     {
  //       name: "用户量",
  //       type: "line",
  //       data: [5, 20, 36, 10, 10, 20],
  //     },
  //   ],
  // });

  // const renderAllCharts = (query: any) => {
  //   console.log(query, "query");
  // };

  //   resolve(renderAllCharts);
  // });
}

onMounted(() => {
  loading.start()
  try {
    initAnalytics()
    // console.log(rerenderChart);
  } finally {
    loading.stop()
  }
})
</script>

<style lang="less" scoped>
.gaCard {
  min-height: 400px;
  position: relative;

  .toolbar {
    display: flex;
    width: fit-content;

    .toggler {
      margin-right: 1rem;
    }

    .selector {
      flex-grow: 1;
      display: flex;

      &.hide {
        opacity: 0;
        visibility: hidden;
        transition: visibility opacity @transition-time-fast;
      }

      &.show {
        opacity: 1;
        visibility: visible;
        transition: visibility opacity @transition-time-fast;
      }

      table {
        margin-right: 1rem;

        tr {
          td {
            &:last-child * {
              display: block;
              text-align: left;
            }
          }
        }
      }
    }
  }

  .pieCharts {
    display: flex;
    justify-content: space-between;
    min-height: 200px;

    .chart {
      width: calc(100% - (3rem) / 4);
      &.country,
      &.city,
      &.browser {
        margin-right: 1rem;
      }
    }
  }

  .timeline {
    min-height: 200px;
  }
}
</style>
